<!--
 * @Author: your name
 * @Date: 2021-08-24 13:44:59
 * @LastEditTime: 2021-09-16 14:41:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\header.vue
-->
<template>
    <div>
        <LayoutHeader :class="['header']" style="padding: 0 0; height: 50px">
            <div class="headerlayout">
                <div class="headerlayout_breadcrumb">
                    <V-breadcrumb :auto-layout="getAutoLayout"></V-breadcrumb>
                </div>
                <div class="headerlayout_prefixCls">
                    <V-prefix></V-prefix>
                </div>
            </div>
        </LayoutHeader>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, unref, ref } from 'vue'
import VBreadcrumb from './Vbreadcrumbs/Vbreadcrumbs.vue'
import VPrefix from './userPerfix/userPerfix.vue'
import { SetTheme } from '../setting/theme'
import { autoWindow } from '../setting/menuTrigger'
import { Layout } from 'ant-design-vue';
export default defineComponent({
    name: 'Vheader',
    components: {
        VBreadcrumb,
        VPrefix,
        Layout,
        LayoutHeader:Layout.Header
    },
    props: {
        datas: {
            type: Array || Object,
        },
    },
    setup() {
    // 响应式窗口
        let { autoValue } = autoWindow()
        const getAutoLayout = computed(() => unref(autoValue.value))
        // 主题
        let { themeColors } = SetTheme()
        // 响应式主题配置
        const getHeaderClass = computed(() => {
            const theme = unref(themeColors)
            return [`primary-${theme}-color`]
        })
      
        return {
            getHeaderClass,
            getAutoLayout
        }
    },
})
</script>
<style lang="less" scoped>
@import "../styles/commit.less";
html[data-theme='dark']{
 .header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(204, 204, 204, 0.162);
  .headerlayout {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    align-items: center;
  }
}
}
html[data-theme='light']{
 .header {
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid rgba(204, 204, 204, 0.162);
  .headerlayout {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    align-items: center;
  }
}
}
</style>
